<!DOCTYPE html>
<html lang="en">
<head>
    <title> 算数学习 </title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <style>
        :root {
            --color-background: #fae3ea;
            --color-primary: #3fab4b;
            --font-family-base: Poppin, sans-serif;
            --font-size-h1: 1.25rem;
            --font-size-h2: 1rem;
        }


        * {
            -webkit-box-sizing: inherit;
            box-sizing: inherit;
        }

        html {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        body {
            background-color: #fae3ea;
            background-color: var(--color-background);
            display: grid;
            font-family: Poppin, sans-serif;
            font-family: var(--font-family-base);
            line-height: 1.5;
            margin: 0;
            min-height: 100vh;
            padding: 5vmin;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            justify-items: center;
            place-items: center;
        }

        question {
            font-style: normal;
            font-weight: bold;
            font-size: x-large;
        }

        button {
            border: 0;
            color: inherit;
            cursor: pointer;
            font: inherit;
        }

        fieldset {
            border: 0;
            margin: 20px 0 0 0;
            padding: 0;
        }

        h1 {
            font-size: 1.25rem;
            font-size: var(--font-size-h1);
            line-height: 1.2;
            margin-top: 0;
            /*margin-bottom: 1.5em;*/
        }

        h2 {
            font-size: 1rem;
            font-size: var(--font-size-h2);
            line-height: 1.2;
            margin-top: 0;
            margin-bottom: 0.5em;
        }

        legend {
            font-weight: 600;
            margin-bottom: 0.5em;
            padding: 0;
        }

        input {
            border: 0;
            color: inherit;
            font: inherit;
        }

        input[type="radio"] {
            accent-color: #fc8080;
            accent-color: var(--color-primary);
        }

        table {
            border-collapse: collapse;
            width: 100%;
        }

        tbody {
            color: #b4b4b4;
        }

        td {
            padding-top: 0.125em;
            padding-bottom: 0.125em;
        }

        tfoot {
            border-top: 1px solid #b4b4b4;
            font-weight: 600;
        }

        .button {
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            background-color: #fc8080;
            background-color: var(--color-primary);
            border-radius: 999em;
            color: #fff;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            grid-gap: 0.5em;
            gap: 0.5em;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            padding-top: 0.75em;
            padding-bottom: 0.75em;
            padding-left: 1em;
            padding-right: 1em;
            -webkit-transition: 0.3s;
            -o-transition: 0.3s;
            transition: 0.3s;
        }

        .button:focus,
        .button:hover {
            background-color: #e96363;
            background-color: var(--color-primary);
        }

        .button--full {
            width: 100%;
        }

        .card {
            border-radius: 1em;
            background-color: #fc8080;
            background-color: var(--color-primary);
            color: #fff;
            padding: 1em;
            text-align: center;
        }

        .form__radios {
            display: grid;
            grid-gap: 1em;
            gap: 1em;
        }

        .form__radio {
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            background-color: #fefdfe;
            border-radius: 1em;
            -webkit-box-shadow: 0 0 1em rgba(0, 0, 0, 0.0625);
            box-shadow: 0 0 1em rgba(0, 0, 0, 0.0625);
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            padding: 1em;
        }

        .form__radio label {
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            grid-gap: 1em;
            gap: 1em;
            font-weight: bold;
            font-size: x-large;
        }

        .header {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            padding-top: 0.5em;
            padding-bottom: 0.5em;
            padding-left: 1em;
            padding-right: 1em;
        }

        .iphone {
            background-color: #fbf6f7;
            background-image: -webkit-gradient(linear, left top, left bottom, from(#fbf6f7), to(#fff));
            background-image: -o-linear-gradient(top, #fbf6f7, #fff);
            background-image: linear-gradient(to bottom, #fbf6f7, #fff);
            border-radius: 2em;
            height: 812px;
            -webkit-box-shadow: 0 0 1em rgba(0, 0, 0, 0.0625);
            box-shadow: 0 0 1em rgba(0, 0, 0, 0.0625);
            width: 100%;
            overflow: auto;
            padding: 2em;
        }

        /**闪烁 */
        .twinkled {
            color: #fff;
            background: linear-gradient(-45deg, #fc8080, #ffffff);
            background-size: 400% 400%;
            -webkit-animation: Gradient 0.3s ease infinite;
            -moz-animation: Gradient 0.3s ease infinite;
            animation: Gradient 0.3s ease infinite;
        }

        @-webkit-keyframes Gradient {
            0% {background-position: 0% 50%}
            50% {background-position: 100% 50%}
            100% {background-position: 0% 50%}
        }

        @-moz-keyframes Gradient {
            0% {background-position: 0% 50%}
            50% {background-position: 100% 50%}
            100% {background-position: 0% 50%}
        }

        @keyframes Gradient {
            0% {background-position: 0% 50%}
            50% {background-position: 100% 50%}
            100% {background-position: 0% 50%}
        }
    </style>
    <!--    https://www.jsjiami.com/jscodeconfusion.html-->
    <script type="text/javascript">
        let rightNum=0;let wrongNum=0;let operators=["\x2b","\x2d","\x2a","\x2f"];let negativeSupport=false;let rightIndex;let question;let answers;let beginTime=new window["\x44\x61\x74\x65"]()['\x67\x65\x74\x54\x69\x6d\x65']();let preEndTime=new window["\x44\x61\x74\x65"]()['\x67\x65\x74\x54\x69\x6d\x65']();$(function(){showTotalTime();nextQuestion();$('\x69\x6e\x70\x75\x74\x5b\x6e\x61\x6d\x65\x3d\x22\x6f\x70\x65\x72\x61\x74\x6f\x72\x49\x6e\x64\x65\x78\x22\x5d')['\x63\x68\x61\x6e\x67\x65'](function(){changeOperatorIndex()})});function showTotalTime(){setInterval(function(){let time=new window["\x44\x61\x74\x65"]()['\x67\x65\x74\x54\x69\x6d\x65']()-beginTime;$("\x23\x74\x6f\x74\x61\x6c\x54\x69\x6d\x65")['\x74\x65\x78\x74']("\u5f53\u524d\u7b54\u9898\u65f6\u95f4\uff1a"+formatTime(time))},1000)}function showWrongQuestions(){let visible=$("\x74\x61\x62\x6c\x65")['\x63\x73\x73']('\x76\x69\x73\x69\x62\x69\x6c\x69\x74\x79');if(visible=='\x76\x69\x73\x69\x62\x6c\x65'){$("\x74\x61\x62\x6c\x65")['\x63\x73\x73']('\x76\x69\x73\x69\x62\x69\x6c\x69\x74\x79','\x68\x69\x64\x64\x65\x6e')}else{$("\x74\x61\x62\x6c\x65")['\x63\x73\x73']('\x76\x69\x73\x69\x62\x69\x6c\x69\x74\x79','\x76\x69\x73\x69\x62\x6c\x65')}}function checkAnswer(){let answer=$('\x69\x6e\x70\x75\x74\x5b\x6e\x61\x6d\x65\x3d\x22\x61\x6e\x73\x77\x65\x72\x22\x5d\x3a\x63\x68\x65\x63\x6b\x65\x64')['\x76\x61\x6c']();if(!answer){return}if(answer!=rightIndex){wrongNum++;$('\x69\x6e\x70\x75\x74\x5b\x6e\x61\x6d\x65\x3d\x22\x61\x6e\x73\x77\x65\x72\x22\x5d\x3a\x63\x68\x65\x63\x6b\x65\x64')['\x70\x61\x72\x65\x6e\x74']()['\x61\x64\x64\x43\x6c\x61\x73\x73']('\x74\x77\x69\x6e\x6b\x6c\x65\x64');$("\x23\x61\x6e\x73\x77\x65\x72"+rightIndex)['\x70\x61\x72\x65\x6e\x74']()['\x63\x73\x73']('\x62\x61\x63\x6b\x67\x72\x6f\x75\x6e\x64\x2d\x63\x6f\x6c\x6f\x72','\x23\x33\x66\x61\x62\x34\x62')}else{rightNum++}addQuestion2Table(question,answers[answer],answers[rightIndex],new window["\x44\x61\x74\x65"]()['\x67\x65\x74\x54\x69\x6d\x65']()-preEndTime);let accuracy=rightNum/(rightNum+wrongNum)*100;$("\x23\x61\x63\x63\x75\x72\x61\x63\x79")['\x74\x65\x78\x74']("\u7b54\u5bf9\uff1a"+rightNum+"\u9898\u3001\u7b54\u9519\uff1a"+wrongNum+"\u9898\u3001\u6b63\u786e\u7387\uff1a"+accuracy['\x74\x6f\x46\x69\x78\x65\x64'](0)+"\x25");setTimeout(function(){$('\x69\x6e\x70\x75\x74\x5b\x6e\x61\x6d\x65\x3d\x22\x61\x6e\x73\x77\x65\x72\x22\x5d\x3a\x63\x68\x65\x63\x6b\x65\x64')['\x70\x61\x72\x65\x6e\x74']()['\x72\x65\x6d\x6f\x76\x65\x43\x6c\x61\x73\x73']('\x74\x77\x69\x6e\x6b\x6c\x65\x64');$("\x23\x61\x6e\x73\x77\x65\x72"+rightIndex)['\x70\x61\x72\x65\x6e\x74']()['\x63\x73\x73']('\x62\x61\x63\x6b\x67\x72\x6f\x75\x6e\x64\x2d\x63\x6f\x6c\x6f\x72','');$('\x69\x6e\x70\x75\x74\x5b\x6e\x61\x6d\x65\x3d\x22\x61\x6e\x73\x77\x65\x72\x22\x5d\x3a\x63\x68\x65\x63\x6b\x65\x64')['\x72\x65\x6d\x6f\x76\x65\x41\x74\x74\x72']("\x63\x68\x65\x63\x6b\x65\x64");nextQuestion();preEndTime=new window["\x44\x61\x74\x65"]()['\x67\x65\x74\x54\x69\x6d\x65']()},2000)}function addQuestion2Table(FzdrpiOS1,ddg2,CmVH_a_CI3,Th4){$("\x74\x61\x62\x6c\x65\x23\x61\x6c\x6c\x51\x75\x65\x73\x74\x69\x6f\x6e\x54\x61\x62\x6c\x65 \x74\x72\x3a\x66\x69\x72\x73\x74")['\x61\x66\x74\x65\x72']('\x3c\x74\x72 \x73\x74\x79\x6c\x65\x3d\x22\x63\x6f\x6c\x6f\x72\x3a '+(ddg2===CmVH_a_CI3?'':'\x23\x66\x63\x38\x30\x38\x30')+'\x3b\x22\x3e\x3c\x74\x64\x3e'+FzdrpiOS1+'\x3c\x2f\x74\x64\x3e\x3c\x74\x64\x3e'+ddg2+'\x3c\x2f\x74\x64\x3e\x3c\x74\x64\x3e'+CmVH_a_CI3+'\x3c\x2f\x74\x64\x3e\x3c\x74\x64\x3e'+formatTime(Th4)+'\x3c\x2f\x74\x64\x3e\x3c\x2f\x74\x72\x3e')}function changeOperatorIndex(){nextQuestion()}function changeNegativeSupport(){negativeSupport=!negativeSupport}function nextQuestion(){let number=$("\x23\x6e\x75\x6d\x62\x65\x72")['\x76\x61\x6c']();if(number==""){number=10;$("\x23\x6e\x75\x6d\x62\x65\x72")['\x76\x61\x6c'](number)}let operatorIndex=$('\x69\x6e\x70\x75\x74\x5b\x6e\x61\x6d\x65\x3d\x22\x6f\x70\x65\x72\x61\x74\x6f\x72\x49\x6e\x64\x65\x78\x22\x5d\x3a\x63\x68\x65\x63\x6b\x65\x64')['\x76\x61\x6c']();let operator=operators[operatorIndex];let num1=window["\x4d\x61\x74\x68"]['\x66\x6c\x6f\x6f\x72'](window["\x4d\x61\x74\x68"]['\x72\x61\x6e\x64\x6f\x6d']()*number+1);let num2=window["\x4d\x61\x74\x68"]['\x66\x6c\x6f\x6f\x72'](window["\x4d\x61\x74\x68"]['\x72\x61\x6e\x64\x6f\x6d']()*number+1);if(operator=="\x2f"){num2=window["\x4d\x61\x74\x68"]['\x66\x6c\x6f\x6f\x72'](window["\x4d\x61\x74\x68"]['\x72\x61\x6e\x64\x6f\x6d']()*(number/4)['\x74\x6f\x46\x69\x78\x65\x64'](0)+1)}if(!negativeSupport&&operator=="\x2d"&&num1<num2){let tempNum=num1;num1=num2;num2=tempNum}if(operator=="\x2f"){let array=multipleOfNum(number,num2);if(array['\x6c\x65\x6e\x67\x74\x68']==0||num2==1){nextQuestion()}else{num1=array[0]}}question=num1+" "+operator+" "+num2+" \x3d \x3f";let result=computeResult(num1,operator,num2);answers=[result,result+1,result+2,result+3];disorderArrays(answers);rightIndex=answers['\x69\x6e\x64\x65\x78\x4f\x66'](result);$("\x5b\x66\x6f\x72\x3d\x61\x6e\x73\x77\x65\x72\x30\x5d")['\x74\x65\x78\x74']("\x41\uff1a "+answers[0]);$("\x5b\x66\x6f\x72\x3d\x61\x6e\x73\x77\x65\x72\x31\x5d")['\x74\x65\x78\x74']("\x42\uff1a "+answers[1]);$("\x5b\x66\x6f\x72\x3d\x61\x6e\x73\x77\x65\x72\x32\x5d")['\x74\x65\x78\x74']("\x43\uff1a "+answers[2]);$("\x5b\x66\x6f\x72\x3d\x61\x6e\x73\x77\x65\x72\x33\x5d")['\x74\x65\x78\x74']("\x44\uff1a "+answers[3]);$("\x71\x75\x65\x73\x74\x69\x6f\x6e")['\x74\x65\x78\x74'](question)}function multipleOfNum(ezRfGr$5,AKLyTZI6){let result=[];for(let i=1;i<=ezRfGr$5;i++){if(i!=AKLyTZI6&&i%AKLyTZI6==0){result['\x70\x75\x73\x68'](i)}}disorderArrays(result);return result}function computeResult(h7,hM8,civ9){let result=0;switch(hM8){case"\x2b":result=h7+civ9;break;case"\x2d":result=h7-civ9;break;case"\x2a":result=h7*civ9;break;case"\x2f":result=h7/civ9;break;default:}return result}function disorderArrays(bKG10){bKG10['\x73\x6f\x72\x74'](()=>window["\x4d\x61\x74\x68"]['\x72\x61\x6e\x64\x6f\x6d']()-0.5)}function formatTime(time){time=time/1000;var KvX11=window["\x4d\x61\x74\x68"]['\x66\x6c\x6f\x6f\x72'](time/3600);var KR12=window["\x4d\x61\x74\x68"]['\x66\x6c\x6f\x6f\x72'](window["\x4d\x61\x74\x68"]['\x66\x6c\x6f\x6f\x72'](time%3600)/60);var OulbH13=window["\x4d\x61\x74\x68"]['\x66\x6c\x6f\x6f\x72'](time%60);var jUBWr14=KvX11['\x74\x6f\x53\x74\x72\x69\x6e\x67']()['\x6c\x65\x6e\x67\x74\x68']===1?`0${KvX11}`:KvX11;var RQlkDYdlF15=KR12['\x74\x6f\x53\x74\x72\x69\x6e\x67']()['\x6c\x65\x6e\x67\x74\x68']===1?`0${KR12}`:KR12;var pKYjYleXk16=OulbH13['\x74\x6f\x53\x74\x72\x69\x6e\x67']()['\x6c\x65\x6e\x67\x74\x68']===1?`0${OulbH13}`:OulbH13;return`${jUBWr14}:${RQlkDYdlF15}:${pKYjYleXk16}`}
    </script>
</head>
<body>

<div class="iphone">

    <header class="header">
        <h1 style="text-align: center">
            <input style="width: 50%;text-align: center;" id="number" name="number" value="10">
            以内的
            </br>
            <input id="operatorIndex0" name="operatorIndex" checked="checked" value="0" type="radio">
            <label for="operatorIndex0">加</label>
            <input id="operatorIndex1" name="operatorIndex" value="1" type="radio">
            <label for="operatorIndex1" ondblclick="changeNegativeSupport()">减</label>
            <input id="operatorIndex2" name="operatorIndex" value="2" type="radio">
            <label for="operatorIndex2">乘</label>
            <input id="operatorIndex3" name="operatorIndex" value="3" type="radio">
            <label for="operatorIndex3">除</label>
        </h1>
    </header>

    <div style="margin-top: 20px">
        <h2>题目</h2>
        <div class="card">
            <question>10 + 9 = ?</question>
        </div>
    </div>

    <fieldset>
        <legend>请选择答案</legend>
        <div class="form__radios" onclick="checkAnswer()">
            <div class="form__radio">
                <label for="answer0">A</label>
                <input id="answer0" name="answer" value="0" type="radio">
            </div>

            <div class="form__radio">
                <label for="answer1">B</label>
                <input id="answer1" name="answer" value="1" type="radio">
            </div>

            <div class="form__radio">
                <label for="answer2">C</label>
                <input id="answer2" name="answer" value="2" type="radio">
            </div>

            <div class="form__radio">
                <label for="answer3">D</label>
                <input id="answer3" name="answer" value="3" type="radio">
            </div>
        </div>
    </fieldset>


    <div style="margin-top: 20px;">
        <div id="totalTime" class="button button--full">当前答题时间：00:00:00</div>
    </div>

    <div id="accuracy" ondblclick="showWrongQuestions()" style="margin-top:20px;border-radius: 1em;background-color: #a17093;color: #fff;text-align: center;">请开始答题！</div>

    <table id="allQuestionTable" style="margin-top: 20px;text-align: center;">
        <tr>
            <th>题目</th>
            <th>选择</th>
            <th>正确答案</th>
            <th>答题耗时</th>
        </tr>
    </table>


</div>


</body>
</html>